<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          家长注册绑定审核管理
        </p>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :exportBtn="false"
                  :border="true"
                  :importBtn="false"
                  :batchDelBtn="false"
                  :isControl="false"
                  :operate="operate"
                  v-on:searchFn="searchFn"
                  v-on:page-change="pageChangeFn"
                  placeholder="学生名关键字"
                  searchText="学生名："
                  cleanText="刷新"
                  v-on:restFn="restFn">
          <div slot="search" class="db_inline">
            状态：
            <Select v-model="searchParam.status" @on-change="queryFn" style="width:90px">
              <Option v-for="item in statusList" :value="item.id" :key="item.id">{{ item.name }}
              </Option>
            </Select>
            申请时间：
            <DatePicker type="date" placeholder="开始时间" v-model="searchParam.bTime" @on-change="searchParam.bTime=$event"
                        style="width: 110px"></DatePicker>
            至
            <DatePicker type="date" placeholder="结束时间" v-model="searchParam.eTime" @on-change="searchParam.eTime=$event"
                        style="width: 110px"></DatePicker>
          </div>
        </VmBtable>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" :mask-closable="false" width="430">
      <Form ref="Form" :model="modal.form" :label-width="100" label-position="right" :rules="modal.rules">
        <FormItem label="审核意见">
          <Input type="textarea" :rows="2" v-model="modal.form.judgeContent" placeholder="请输入审核意见" style="width:80%"/>
        </FormItem>
      </Form>
      <div slot="footer" v-if="modal.form.status===0">
        <Button type="error" @click="subForm" :loading="modal.loading">不通过</Button>
        <Button type="primary" @click="passFn" :loading="modal.loading">通过</Button>
      </div>
      <div slot="footer" v-else>
        <Button @click="modal.visible=false" type="text">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="face.visible" :title="face.title" width="540">
      <div style="font-size: 16px">
        <p v-if="modal.form.status===0"><label style="color: #ff3300">警告：</label> 请先审核绑定信息</p>
        <p v-if="modal.form.status===2"><label style="color: #ff3300">错误：</label> 绑定信息不通过，无法审核人脸信息</p>
      </div>
      <div style="text-align: center">
        <img style="max-width: 480px;max-height: 540px" :src="face.url"/>
      </div>
      <div slot="footer" v-if="face.data.status===0&&modal.form.status===1">
        <Button type="error" @click="judgeFace(-2)">不通过</Button>
        <Button type="primary" @click="judgeFace(2)" :loading="face.loading">通过</Button>
      </div>
      <div slot="footer" v-else>
        <Button @click="face.visible=false" type="text">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="clazz.visible" title="更换班级" width="400">
      <Form ref="Form" :model="clazz.form" :label-width="100" label-position="right" :rules="clazz.rules">
        <FormItem label="审核意见">
          <Select v-model="clazz.form.clazzId" style="width:200px">
            <Option v-for="item in clazzList" :value="item.id" :key="item.id">{{item.gradeName}}-{{ item.name }}
            </Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="info" @click="clazz.visible=false">关闭</Button>
        <Button type="primary" @click="sureChange">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import Cookie from "js-cookie"

  export default {
    components: {
      VmBtable
    },
    data() {
      return {
        searchParam: {
          current: 1,
          size: 20,
          total: 0,
          bTime: '',
          eTime: '',
          status: '',
        },
        statusList: [
          {id: 0, name: '未审核'},
          {id: 1, name: '已通过'},
          {id: 2, name: '不通过'},
        ],
        clazzList: [],
        clazz: {
          visible: false,
          form: {
            clazzId: ''
          },
          rules: {
            clazzId: [{
              required: true,
              trigger: 'blur',
              type: 'number',
              message: '必填项'
            }]
          }
        },
        dataColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            minWidth: 100,
          },
          {
            title: '学生信息',
            align: 'center',
            minWidth: 300,
            children: [
              {
                title: '学生姓名',
                key: 'studentName',
                align: 'center',
                minWidth: 120,
              },
              {
                title: '班级',
                key: 'clazzName',
                align: 'center',
                minWidth: 160,
              },
            ],
          },
          {
            title: '家长信息',
            align: 'center',
            minWidth: 380,
            children: [
              {
                title: '家长姓名',
                key: 'kinsfolkName',
                align: 'center',
                minWidth: 120,
              },
              {
                title: '角色',
                key: 'role',
                align: 'center',
                minWidth: 100,
              },
              {
                title: '手机号码',
                key: 'phone',
                align: 'center',
                minWidth: 160,
              },
            ],
          },
          {
            title: '申请时间',
            key: 'createTime',
            align: 'center',
            width: 160
          },
          {
            title: '审核时间',
            key: 'judgeTime',
            align: 'center',
            minWidth: 160,
          },
          {
            title: '状态',
            key: 'status',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              let color = 'orange';
              let desc = '未审核';
              if (params.row.status === 1) {
                color = 'green';
                desc = '审核通过';
              } else if (params.row.status === 2) {
                color = 'red';
                desc = '审核不通过';
              }
              return h('div', {style: {color: color}}, desc)
            }
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 220,
            render: (h, params) => {
              let btn = [];
              let bindBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.bindJudgeFn(params.row)
                  }
                }
              }, '注册审核');
              let detailBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.passFn(params.row)
                  }
                }
              }, '通过');
              let changeClazzBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.changeClazzFn(params.row)
                  }
                }
              }, '更换班级');
              let faceBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.checkFn(params.row)
                  }
                }
              }, '人脸审核');
              if (params.row.status===0) {
                btn = [changeClazzBtn]
              }
              btn.push(bindBtn);
              if (params.row.faceRecordId) {
                btn.push(faceBtn);
              }
              return h('div', btn);
            }
          }
        ],
        operate: [],
        dataTable: [],
        modal: {
          visible: false,
          title: '',
          loading: false,
          form: {
            judgeContent: '感谢您的使用',
          },
          rules: {
            'judgeContent': [{
              required: true,
              trigger: 'blur',
              message: '必填项'
            }]
          }
        },
        face: {
          data: {
            status: 0
          },
          visible: false,
          title: '',
          url: '',
          loading: false
        }
      };
    },
    methods: {
      changeClazzFn(data) {
        console.log(data.clazzId);
        this.clazz.visible = true;
        API.fetchKindergartenClazz().then(resp => {
          this.clazzList = resp.data;
          Object.assign(this.clazz.form, data);
        })
      },
      sureChange() {
        API.changeClazzFn(this.clazz.form).then(resp => {
          this.queryFn();
          this.clazz.visible = false;
        })
      },
      bindJudgeFn(data) {
        // API.passJudge(this.modal.form).then(resp => {
        //   this.queryFn();
        //   this.complete();
        // })
        Object.assign(this.modal, {
          title: '审核操作',
          visible: true,
          loading: false,
          form: data
        })
      },
      checkFn(data) {
        this.modal.form = data;
        API.fetchFaceRecordById(data.faceRecordId).then(res => {
          let record = res.data;
          Object.assign(this.face, {
            visible: true,
            title: '【' + record.clazzName + record.name + '】人脸信息',
            url: record.url,
            data: record
          })
        })
      },
      judgeFace(status) {
        if (this.modal.form.status === 0) {
          this.$Message.error('请先审核绑定信息');
          return;
        }
        this.face.data.status = status;
        API.judgeFaceRecord(this.face.data).then(resp => {
          this.face.visible = false;
          this.queryFn();
        })
      },
      passFn() {
        this.modal.loading = true;
        API.passJudge(this.modal.form).then(resp => {
          this.queryFn();
          this.complete();
        })
      },
      restFn() {
        this.searchParam.current = 1;
        this.searchParam.size = 20;
        this.searchParam.bTime = '';
        this.searchParam.eTime = '';
        this.searchParam.status = '';
        this.searchParam.studentName = '';
        this.queryFn();
      },
      queryFn() {
        API.fetchKinsfolkJudge(this.searchParam).then(
          res => {
            let data = res.data;
            this.dataTable = data.records;
            this.searchParam.total = data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      pageChangeFn(current) {
        this.searchParam.current = current;
        this.queryFn();
      },
      searchFn(value) {
        this.searchParam.studentName = value;
        this.queryFn();
      },
      subForm() {
        let data = Object.assign(this.modal.form);
        this.modal.loading = true;
        API.killJudge(data).then(resp => {
          this.queryFn();
          this.complete();
        })
      },
      complete() {
        Object.assign(this.modal, {
          visible: false,
          title: '',
          loading: false,
          form: {
            judgeContent: '',
          }
        });
      },
      cancelSub() {
        this.complete();
      }
    }
    ,
    created() {
    }
    ,
    mounted() {
      this.queryFn();
    }
  }
</script>

<style scoped>

</style>
